<template>
  <div>
    <el-menu @select="selectNode"
             :collapse="homedata.isCollapse" :style="{width:homedata.leftWidth+'px'}">
      <el-submenu v-for="menu in menus" :index="menu.id+''">
        <template slot="title">
          <i :class="['iconfont',menu.icon]"></i>
          <span slot="title">{{menu.name}}</span>
        </template>
        <el-menu-item v-for="m in menu.children" :index="m.id+''" @click="selectNode(m.url)">
          <template slot="title">
            <i :class="['iconfont',m.icon]"></i>
            <span slot="title">{{m.name}}</span>
          </template>
        </el-menu-item>
      </el-submenu>
    </el-menu>
  </div>
</template>

<script>
  import axios from "axios"
  import  {menuData}  from "../main.js"
  export default {
    props:["homedata"],
    data() {
      return {
        isCollapse: false,
        menus: []
      }
    },
    mounted() {
      var that = this;
      axios.get("/sys/menu/menus").then(function (response) {
        that.menus = response.data;
        menuData.splice(0,menuData.length);
        for(var i in that.menus){
          menuData.push(that.menus[i])
        }

      })

    },
    methods: {
      selectNode(url) {
        this.$router.push(url)
      }
    }
  }
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
</style>
